import { mapState } from 'vuex'
import { settingModule } from '@/store/modules/setting'

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class AppMixin extends Vue {
  get layout() {
    return settingModule.layout
  }
  get theme() {
    return settingModule.theme
  }
  // color() {
  //   return settingModule.c
  // },
  get fixedHeader() {
    return settingModule.fixedHeader
  }
  get contentWidth() {
    return 0;
    // return settingModule.contentWidth
  }
  get fixedSidebar() {
    return true
    // return settingModule.fixedSidebar
  }
  get autoHideHeader() {
    return false
    // return settingModule.autoHideHeader
  }
  get isMobile() {
    return settingModule.isMobile
  }
  get sideCollapsed() {
    return true
    // return settingModule.sideCollapsed
  }
  get multiTab() {
    return true
    // return settingModule.multiTab
  }
  // ...mapState({
  //   layout: state => state.app.layout,
  //   navTheme: state => state.app.theme,
  //   primaryColor: state => state.app.color,
  //   colorWeak: state => state.app.weak,
  //   fixedHeader: state => state.app.fixedHeader,
  //   fixedSidebar: state => state.app.fixedSidebar,
  //   contentWidth: state => state.app.contentWidth,
  //   autoHideHeader: state => state.app.autoHideHeader,

  //   isMobile: state => state.app.isMobile,
  //   sideCollapsed: state => state.app.sideCollapsed,
  //   multiTab: state => state.app.multiTab
  // }),
  get isTopMenu() {
    return settingModule.layout === 'head'
  }

  get isLargeScreen() {
    return window.screen.width >= 1920
  }
}
